<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D魔方</title>
		<link rel="stylesheet" href="css/魔方样式.css">
		<style>
			/*通用选择器：通用效果    盒模型：内外边距*/
			*{
				margin: 0;
				padding: 0;
			}
			/*1.容器：看3D视觉效果--①宽高②居中③视觉属性*/
			.container{
				width: 350px;
				height: 350px;
				margin: 200px auto;
				/*视觉属性：  数值px;  拉开距离*/
				perspective: 3000px;
				bor der:1px solid red;
			}
			/*2.魔方整体：①宽高②指定3D坐标轴【3D效果层】③查看3D坐标轴【X,Y】④动画*/
		.box{
			width:300px;
			height:300px;
		/*3D效果层：魔方上 指定3D坐标轴 具备X Y Z轴 */
		transform-style: preserve-3d;
		/*倾斜：X 45deg Y 45deg，查看3D坐标轴*/
		transform: rotateX(45deg) rotateY(45deg);
		animation: mofang 8s linear infinite;
		}
		@keyframes mofang{
			0%{
			transform: rotateX(45deg) rotateY(45deg);	
			}
			70%{
			transform: rotateX(180deg) rotateY(180deg);
			}
			100%{
			transform: rotateX(360deg) rotateY(360deg);
			}
		}
		/*3.六个面，公共属性:设定宽高，绝对定位*/
		.page{
			width: 300px;
			height: 300px;
			/* 绝对定位：6个面定到一个点，定位坐标轴，6个面所有坐标轴一致 */
		    position: absolute;
		}
		/* 3.1六个面添加6个颜色 */
		.page_top{
			backgroun d-color: #ff0000;
			/*Z轴顶部平移150px*/
			transform: translateZ(150px);
			
		}
		.page_bottom{
			backgroun d-color: #55ff00;
			/* Z轴 底部平移-150px 向下 */
			transform: translateZ(-150px);
		}
		.page_left{
			backgroun d-color: #55ffff;
			/*X轴  向左平移-150px 按照Y轴 旋转  90deg*/
			transform: translateX(-150px) rotateY(90deg);
		}
		.page_right{
			backgroun d-color: #ff55ff;
			transform: translateX(150px)rotateY(90deg);
		}
		.page_before{
			backgroun d-color: #ffff00;
			transform: translateY(150px)rotateX(90deg);
		}
		.page_after{
			backgroun d-color: #ff5500;
			transform: translateY(-150px)rotateX(90deg);
		}
		</style>
	</head>
	<body>
		<!-- 3D魔方   1.容器：看3D效果 2.魔方整体 3.6个面-->
		<div class="container">
			<div class="box">
				<!-- 6个面特点：①6个面宽高一致②颜色不一致
				 使用类选择器：多别名方式解决上述问题-->
				<div class="page page_top"></div>
				<div class="page page_bottom"></div>
				<div class="page page_left"></div>
				<div class="page page_right"></div>
				<div class="page page_before"></div>
				<div class="page page_after"></div>
			</div>
		</div>
	</body>
</html>